﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
         Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>dragAPI</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
    <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <script>
        if ('ondragstart' in document.documentElement) {
            alert("ddd")
        }
        function init() {
            var dragme = document.getElementById('dragee');
            var dragRec = document.getElementById('drager');
            var i = 0; ;

            dragme.addEventListener('dragstart', function (e) {
                var dt = e.dataTransfer; //datatransfer 表示拖放时要携带的数据
                dt.effectAllowed = 'all';
                //effectAllowed: copy, link, move, copyLink, copyMove, all, none & uninitialized
                //effectAllowed表示携带数据能允许 拖放的操作类型。
                i++;
                dt.setData('text/plain', "你好,我被拖放了" + i + "次<br/>");
            }, false);
            dragRec.addEventListener('dragend', function (e) {
                e.preventDefault();
            }, false);

            dragRec.addEventListener('drop', function (e) {
                var dt = e.dataTransfer;
                var text = dt.getData('text/plain');
                if (i == 1) {
                    dragRec.innerHTML = "";
                }
                dragRec.innerHTML += text;
                e.preventDefault();
                e.stopPropagation();
            }, false);
        }
        document.ondragover = function (e) { e.preventDefault(); };
        document.ondrop = function (e) { e.preventDefault(); };
        document.addEventListener('touchend', function (e) {
            e.preventDefault();
        }, false);
        alert(unescape(escape("组1")));
    </script>
</head>
<body onload="init()">
    <div id='dragee' draggable="true" style="width: 200px; height: 30px; border: 1px solid blue">
        请托我</div>
    <div id='drager' style="width: 200px; height: 500px; border: 1px solid red">
        拖到我身上</div>
</body>
</html>
